<template>
  <div class="personalInfo">
    <Load v-if="!userStore.userName" />
    <div class="main" v-else>
      <div class="sidebar_info">
        <div class="sidebar_picture">
          <div class="picture">
            <div class="avatar">
              <el-avatar
                :src="userStore.info.avatar"
                style="width: 90%; height: 100%"
              >
              </el-avatar>
            </div>
            <div class="uploadPic" @click="uploadDialog">
              <el-icon class="icon">
                <Camera />
              </el-icon>
            </div>
          </div>
          <div class="userName">{{ userStore.info.nickName }}</div>
        </div>
        <div class="sidebar_list"></div>
      </div>

      <div class="personal_right_sidebar">
        <div class="personal_info_form">
          <InfoForm />
        </div>
      </div>
    </div>

    <!-- 修改头像弹出框 -->
    <el-dialog
      v-model="dialogVisible"
      title="头像更换"
      width="400"
      :before-close="handleClose"
    >
      <div style="width: 100%; display: flex; justify-content: center">
        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :limit="1"
          :class="{ 'hide-upload-btn': !uploadVisible }"
          :on-remove="handleRemove"
          ref="uploadRef"
          v-model:file-list="fileList"
        >
          <el-icon><Plus /></el-icon>

          <template #file="{ file }">
            <div>
              <el-image
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
                style="width: 100%; height: 100%"
                fit="contain"
              />
              <span class="el-upload-list__item-actions">
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <el-icon><Delete /></el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="save"> 保存 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import InfoForm from "./InfoForm.vue";
import { ref, computed } from "vue";
import useUserStore from "@/store/modules/user";
import Load from "@/components/Load.vue";
import { reqFileUpload } from "@/api/common";
import { ElMessage } from "element-plus";
import { reqUserUpdate } from "@/api/user";

let userStore = useUserStore();

const dialogVisible = ref(false);

const fileList = ref([]);

const uploadRef = ref();

//上传按钮是否显示
const uploadVisible = computed(() => !fileList.value.length);

// 清除文件
const handleRemove = (file) => {
  fileList.value = fileList.value.filter((item) => item !== file);
};

const uploadDialog = () => {
  dialogVisible.value = true;
  fileList.value.push({ url: userStore.info.avatar });
};

const handleClose = (doen) => {
  fileList.value = [];
  doen();
};

const cancel = () => {
  dialogVisible.value = false;
  fileList.value = [];
};

const save = async () => {
  const entity = {
    id: userStore.info.id,
  };

  if (fileList.value.length > 0) {
    const formData = new FormData();
    formData.append("file", fileList.value[0].raw);
    try {
      const res = await reqFileUpload(formData);
      if (res.code == 200) {
        entity.avatar = res.data;
        ElMessage.success("头像更换成功");
      } else {
        ElMessage.error("头像上传失败");
        return;
      }
    } catch (error) {
      ElMessage.error("头像上传时发生错误");
      return;
    }
  }

  await reqUserUpdate(entity);

  userStore.userInfo();

  dialogVisible.value = false;
};
</script>

<style scoped lang="scss">
.personalInfo {
  width: 100%;
  height: 100%;
  .main {
    display: flex;
    justify-content: space-around;

    .sidebar_info {
      flex: 1;
      background-color: rgb(255, 255, 255);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      .sidebar_picture {
        width: 100%;
        height: 35%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .picture {
          width: 50%;
          height: 70%;
          border-radius: 50%;
          position: relative;

          .avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            cursor: pointer;
          }
          .uploadPic {
            position: absolute;
            top: 0;
            left: 0;
            width: 90%;
            height: 100%;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.5s;
            .icon {
              position: absolute;
              color: #d8d8d8;
              font-size: 4em;
              inset: 50%;
              transform: translate(-50%, -50%);
              opacity: 0;
              transition: all 0.8s;
            }
          }
        }
        .userName {
          font-weight: bold;
          margin-top: 20px;
          font-size: 20px;
        }
        .picture:hover .uploadPic {
          background-color: rgba(0, 0, 0, 0.443);
        }
        .picture:hover .icon {
          opacity: 1;
        }
      }
    }
    .personal_right_sidebar {
      flex: 2.5;
      margin-left: 30px;
      background-color: rgb(255, 255, 255);
      border-radius: 8px;
      padding: 30px;
      box-sizing: border-box;
      .personal_info_form {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/** 隐藏上传按钮 */
.hide-upload-btn :deep(.el-upload--picture-card) {
  display: none;
}
</style>